<template>
    <div id="Content">
    <div id="Catalog" style="margin-top: -20px">
        <!-- <form action="/account/signon" method="post"> -->
            <p style="font-family: 'Arial Black';font-size: 25px">
                Please enter your username and password.
            </p>
            <p style="font-family: 'Arial Black';font-size: 22px">
                Username:<input type="text" v-model="signOnForm.username" name="username"/><br/>
                Password: <input type="password" v-model="signOnForm.password" name="password"/>
            </p>
            <br/>
            <br/>
            <!-- <input style="font-size: 20px" type="submit" value="Login"/> -->
            <a href="#" @click="signon">Login</a>
            <p><font color="red" th:text="${msg}"></font></p>
        <p>Need a user name and password?</p>
        <a href="#">Register Now!</a>
    </div>
</div>
</template>

<script>
    export default {
        name: "Signon",
        data() {
            return {
                signOnForm: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            signon() {
                const _this = this
                if(this.signOnForm.username == '' || this.signOnForm.password == '') {
                    alert('账号或密码不能为空！')
                } else {
                    axios({
                        method: 'post',
                        url: 'http://localhost:8088/account/tokens',
                        params: _this.signOnForm
                    }).then(function (resp) {
                        //console.log(resp)
                        //token: console.log(resp.data.msg)
                        if(resp.status == 200)
                        {
                            localStorage.setItem("token", resp.data.msg)
                            localStorage.setItem("username", _this.signOnForm.username)
                            alert('登录成功！')
                            _this.$router.push('/Main');
                        }
                        else
                        {
                            alert('用户名或密码错误！')
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/css/jpetstore.css";
</style>